<template>
  <basic-container  v-loading="loading">
    <!-- START goBack -->
    <div class="el-page-header haruyuki-mb-20">
      <div
        class="el-page-header__left haruyuki-flex-center haruyuki-size-18"
        @click="goBack"
      >
        <i class="el-icon-arrow-left"></i>
        <div class="haruyuki-size-16">返回</div>
      </div>
    </div>
    <!-- END goBack -->
    <section class="haruyuki-bg-color-white">
      <div class="haruyuki-title haruyuki-size-16">
        <i class="el-icon-s-order"></i><span class="haruyuki-ml-6">物流详情</span>
      </div>
      <div class="haruyuki-content">
        <el-row :gutter="20">
          <el-col :span="4" >
            <span >发票类型：{{data.invoiceTypeName}}</span>
          </el-col>
          <el-col :span="4" >
            <span >邮寄时间：{{data.emailTimeShort}}</span>
          </el-col>
          <el-col :span="4" v-if="data.rimMailNo">
            <span >物流单号：{{data.rimMailNo}}</span>
          </el-col>
        </el-row>
      </div>
      
      <div class="haruyuki-title haruyuki-size-16">
        <i class="el-icon-s-order"></i><span class="haruyuki-ml-6">发票详情</span>
      </div>
      <div class="haruyuki-content" v-for="(item,index) in data.list" :key="index">
        <el-row :gutter="20">
          <el-col :span="4">
            <img :src="item.link" :alt="item.link" style="width:100px;" @click="imgPreview(item.link)">
          </el-col>
          <el-col :span="5">
            <span >发票号：{{item.invoiceCode}}</span>
          </el-col>
          <el-col :span="5">
            <span >发票金额：{{item.amount}}</span>
          </el-col>
          <el-col :span="3">
            <span >审核状态：{{item.adminStateName}}</span>
          </el-col>
          <el-col :span="7" v-show="item.adminState === 2">
            <span >审核意见：{{item.comment}}</span>
          </el-col>
        </el-row>
      </div>
      <el-image-viewer
        style="z-index: 99999;"
        v-if="imgShow"
        :on-close="()=>{ imgShow = false }"
        :url-list="imgUrlList"
      ></el-image-viewer>
    </section>
  </basic-container>
</template>

<script>
import { getDetail} from "@/api/rb-service/invoiceMail/invoice_mail";

export default {
  
  data() {
    return {
      rimNo: '',
      loading: true,
      data: [],
      imgShow: false,
      imgUrlList:[]
    }
  },
  computed: {
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
    exhibition() {
      return (val) => {
        if (val == "" || val == "-1") {
          return (val = 0);
        } else {
          return val;
        }
      };
    },
  },
  created() {
    this.rimNo = this.$route.query.rimNo;
    this.getData(this.rimNo);
  },
  methods: {
    // 预览图片
    imgPreview(url) {
        this.imgUrlList[0] = url;
        this.imgShow = true;
    },
    getData(rimNo){
      let that = this;
      getDetail(rimNo).then(res=>{
        that.loading = false;
        that.data = res.data.data;
      })
    },
    /* 返回页面 */
    goBack() {
      this.$router.$avueRouter.closeTag();
      this.$router.back();
    }
    
  }
};
</script>

<style lang="scss" scoped>
.picture-preview {
  color: #409eff;
  cursor: pointer;
}

.merchant-title {
  font-weight: bold;
}
.img-margin-r10{
  margin-right: 10px;
}
.haruyuki-content {
    background: #fff;
    box-shadow: 0px 0px 5px 5px #f4f4f5;
    margin-bottom: 10px;
    margin-top: 10px;
}
</style>